<template>
	<div>
		<div style="width: 100%; display: flex; position: relative; margin-top: 20px">
			<div style="width: 2%; margin-left: 30px">
				<div>
					<span data-v-jzl20210826="" style="margin-top: 35px; opacity: 0" class="headerRadio"></span>

					<div v-if="experienceData.length > Index">
						<span v-for="(num, index) in leftRows" :key="index" class="hingelisHeard"
							style="margin-top: 55px"></span>
					</div>
					<span data-v-jzl20210826="" v-if="leftShow" style="margin-top: 98.5px; opacity: 0"
						class="hingeorgerHeard"></span>
				</div>
			</div>
			<div style="width: 96%">
				<div style="display: flex" v-for="(item, index) in experienceData" :key="index">
					<div style="display: flex; width: 100%" v-if="(index + 1) % 2 != 0">
						<div class="timeline" v-for="(v, i) in DisplayProcessing(experienceData, index + 1)" :key="i"
							:style="(i + 1) % Index != 0 ? '' : 'width: 12%;'">
							<div class="Nodes">

                          
								<!-- <ma-icon-position style="width:35px;height:35px;" v-if="areJsonStringsEqual( v.pose, current_position) && v.type == 'normal'" /> -->
								<div class="box_current element" v-if="v.type == 'normal'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									  <!-- <ma-icon-position style="width:15px;height:15px;" v-if="areJsonStringsEqual( v.pose, current_position) && v.type == 'normal'" />  -->
									<ma-icon-abslute   style="width:35px;height:35px;"  />

								</div>
								<div class="box_current element" v-if="v.type == 'delivery'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)"  />
									<ma-icon-paisong   style="width:35px;height:35px;"  />
								</div>
								<div class="box_current element" v-if="v.type == 'production'">
									<ma-icon-position style="width:15px;height:15px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<ma-icon-chukou   style="width:35px;height:35px;"  />
								</div>
								<div class="box_current element" v-if="v.type == 'charge'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<ma-icon-cdz   style="width:35px;height:35px;"  />
								</div>
							
								<ma-icon-abslute   style="width:35px;height:35px;" v-if="!v.type" />
								<!-- <SvgIcon name="ele-Microphone" :size="20" style="color: #f56c6c" /> -->
							</div>
							<div class="timeNodes">
								<div class="nodeTimes">
									<span class="element">{{ v.name }}
										<!-- {{ current_position }} -->
										<!-- {{ v.pose}}  -->
										<!-- {{ areJsonStringsEqual( v.pose, current_position) }} -->
										<!-- {{ areJsonStringsEqual( v.pose, current_position)?'当前':'不是' }} -->
									</span>
								</div>
								<div class="timeContent">
									<el-tooltip class="item" effect="dark" :content="v.content" placement="right">
										<p class="nodeTimelis" @click="onClickDate(v.name, term)">
											<span v-if="v.status === 0" style="color: #409eff">{{ v.content }}</span>
											<span v-else-if="v.status === 1" style="color: #42a51a">{{ v.content
												}}</span>
											<span v-else style="color: #6b7280c2">{{ v.content }}</span>
										</p>
									</el-tooltip>
								</div>
							</div>
							<div class="border" v-if="
								(i + 1) % Index != 0 &&
								i != DisplayProcessing(experienceData, index + 1).length - 1
							">
								<div class="borderTime"></div>
							</div>
						</div>
					</div>
					<div style="display: flex; width: 100%" v-else>
						<div class="timeline2" v-for="(v, i) in DisplayProcessing(experienceData, index + 1)" :key="i"
							:style="i + 1 == 1 &&
									DisplayProcessing(experienceData, index + 1).length != 1
									? 'width: 12%;'
									: ''
								">
							<div class="border" v-if="i != 0">
								<div class="borderTime"></div>
							</div>
							<div class="Nodes">
							
								
								<div class="box_current element" v-if="v.type == 'normal'">
									<ma-icon-position style="width:15px;height:15px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<!-- <ma-icon-position style="width:15px;height:15px;" v-if="areJsonStringsEqual( v.pose, current_position) && v.type == 'normal'" /> -->
									<ma-icon-abslute   style="width:35px;height:35px;"  />

								</div>
								<div class="box_current element" v-if="v.type == 'delivery'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<ma-icon-paisong   style="width:35px;height:35px;"  />
								</div>
								<div class="box_current element" v-if="v.type == 'production'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<ma-icon-chukou   style="width:35px;height:35px;"  />
								</div>
								<div class="box_current element" v-if="v.type == 'charge'">
									<ma-icon-position style="width:20px;height:20px;margin-bottom: 3px;" v-if="areJsonStringsEqual( v.pose, current_position)" />
									<ma-icon-cdz   style="width:35px;height:35px;"  />
								</div>
							
								<!-- <SvgIcon name="ele-Microphone" :size="20" style="color: #f56c6c" /> -->
								<ma-icon-position   style="width:35px;height:35px;" v-if="!v.type" />

							</div>
							<div class="timeNodes">
								<div class="nodeTimes">
									<span>{{ v.name }} </span>
								</div>
								<div class="timeContent">
									<el-tooltip class="item" effect="dark" :content="v.content" placement="right">
										<p class="nodeTimelis" @click="onClickDate(v.name, term)">
											<span v-if="v.status === 0" style="color: #409eff">{{ v.content }}</span>
											<span v-else-if="v.status === 1" style="color: #42a51a">{{ v.content
												}}</span>
											<span v-else style="color: #6b7280c2">{{ v.content }}</span>
										</p>
									</el-tooltip>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width: 2%; margin-right: 30px">
				<div>
					<span class="hingelis" v-if="experienceData.length > Index"></span>
					<div v-if="experienceData.length > Index * 2">
						<span class="hingelis" v-for="(num, index) in rightRows" :key="index"
							style="margin-top: 60px"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import tool from '@/utils/tool';

export default {
	props: {
		data: {
			type: Array,
			default: () => {
				return [];
			},
		},
		Index: {
			type: Number,
			default: 0,
		}, //第一行展示X条数据
		current_position:{

			type: Object

		}
			

		
	},
	data() {
		return {
			experienceData: this.data,
			leftRows: 0,
			rightRows: 0,
			leftShow: false,
			rightShow: false,
			// current_position: tool.local.get("cur_position")
			// pdfImg: require("../../assets/images/pdfReported.png"), //在下方展示的图片
		};
	},
	watch: {
		data: {
			handler(newVal, oldVal) {

				console.log(newVal)
				//时间线数据
				this.experienceData = newVal;
				let rows = Math.ceil(newVal.length / this.Index);
				this.leftRows =
					rows == 2
						? 0
						: rows % 2 == 0
							? parseInt(rows / 2) - 1
							: parseInt(rows / 2);
				this.rightRows =
					rows == 4
						? 1
						: rows % 2 == 0
							? parseInt(rows / 2) % 2 == 0
								? parseInt(rows / 2) >= 4
									? parseInt(rows / 2) - 1
									: parseInt(rows / 2)
								: parseInt(rows / 2) - 1
							: parseInt(rows / 2) - 1;
				this.leftShow = rows % 2 == 0 ? true : false;
				this.rightShow = rows == 1 ? false : rows % 2 == 1 ? true : false;
				// this.current_position = tool.local.get("cur_position");
			},
			immediate: true,
		},
	},
	created() { },
	methods: {
		DisplayProcessing(Arg, Num) {
			//数据循环处理
			let arr = Arg.slice(this.Index * (Num - 1), this.Index * Num);
			arr = Num % 2 == 0 ? arr.reverse() : arr;
			return arr;
		},
		onClickDate(date, term) {
			//选择报告
			this.$emit("onClickDate", term);
		},
		areJsonStringsEqual(jsonStr1, jsonStr2) {

			if(!jsonStr2){
               return false
			}
			console.log(jsonStr2)
			const obj1 = JSON.parse(jsonStr1);
			console.log(obj1)
			console.log(jsonStr2.x)
			// if(jsonStr2.x==obj1.x && jsonStr2.y==obj1.y && jsonStr2.theta==obj1.theta){
                
			// }
			// JSON.stringify(obj1) == JSON.stringify(obj2)
			//const obj2 = JSON.parse(jsonStr2);
			return jsonStr2.x==obj1.x && jsonStr2.y==obj1.y && jsonStr2.theta==obj1.theta;
		}
	}

}
</script>
<style scoped>
.timeline {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
}

.timeline2 {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.border {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: flex;

}

.borderTime {
	border-bottom: 2px solid #9cd3ff;
	width: 100%;
}

.Nodes {}

svg {

	color: #1e9bff;
	height: 1.5em;
	width: 1.5em;
}

.timeNodes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 135px;
	min-width: 30px;
}

.nodeTimelis {
	max-width: 150px;
	overflow: hidden;
	word-break: keep-all;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}

.nodeTimelis:active {
	color: #1e9bff;
}

.nodeTimes {
	margin-bottom: 0;
	font-size: 12px;
}

.btns-img {
	height: 16px;
	width: 16px;
}

.hingelis {
	content: "";
	display: block;
	width: 100%;
	height: 60px;
	border: 2px solid #9cd3ff;
	border-radius: 0 20px 20px 0px;
	border-left: 0px;
	margin-top: 29.5px;
}

.hingelisHeard {
	content: "";
	display: block;
	width: 100%;
	height: 63.1px;
	border: 2px solid #9cd3ff;
	border-radius: 20px 0px 0px 20px;
	border-right: 0px;
	margin-top: 50px;
}

.hingeorger {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	margin: 49.5px 0;
	position: relative;
}

.hingeorgerHeard {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	position: relative;
}

.hingeorgerHeard[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	left: -2px;
	border-top: 5px solid transparent;
	border-right: 12px solid #cccccc;
	border-bottom: 5px solid transparent;
}

.hingeorger[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	right: -2px;
	border-top: 5px solid transparent;
	border-left: 12px solid #cccccc;
	border-bottom: 5px solid transparent;
}

.headerRadio {
	display: block;
	width: 100%;
	border-bottom: 1px solid #cccccc;
	position: relative;
}

.headerRadio[data-v-jzl20210826]:after {
	content: "";
	position: absolute;
	top: -4px;
	left: -2px;
	width: 1px;
	height: 1px;
	border-radius: 50%;
	background: #cccccc;
	border: 5px solid #cccccc;
	position: absolute;
	right: 35px;
	top: 50%;
	transform: translate(0, -50%);
}

::-webkit-scrollbar {
	width: 3px;
	height: 3px;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background-color: #99a9bf;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: #d3dce6;
}
/* 定义一个名为floating的动画 */
@keyframes floating {
  0% {
    transform: translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateY(-4px); /* 向上移动4像素 */
  }
  100% {
    transform: translateY(0); /* 回到初始位置 */
  }
}
 
/* 应用动画到指定的元素 */
.element {
  animation: floating 2s ease infinite; /* 动画名称、持续时间、缓动函数、循环次数 */
}
.box_current{

	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
</style>
